<template>
  <div class="job-audit-container">
    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="职位名称">
          <el-input v-model="queryParams.jobName" placeholder="请输入职位名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="loading" :data="jobList" border style="width: 100%">
      <el-table-column prop="name" label="职位名称" min-width="120"></el-table-column>
      <el-table-column prop="companyName" label="公司名称" min-width="120"></el-table-column>
      <el-table-column prop="salary" label="薪资" width="120"></el-table-column>
      <el-table-column prop="address" label="工作地点" width="120"></el-table-column>
      <el-table-column prop="education" label="学历要求" width="100"></el-table-column>
      <el-table-column prop="experience" label="经验要求" width="100"></el-table-column>
      <el-table-column prop="status" label="审核状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleAudit(scope.row, 2)">同意</el-button>
          <el-button size="mini" type="danger" @click="handleAudit(scope.row, 3)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
    </el-pagination>

    <!-- 职位详情对话框 -->
    <el-dialog title="职位详情" :visible.sync="dialogVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="职位名称">{{ currentJob.jobName }}</el-descriptions-item>
        <el-descriptions-item label="公司名称">{{ currentJob.companyName }}</el-descriptions-item>
        <el-descriptions-item label="薪资">{{ currentJob.salary }}</el-descriptions-item>
        <el-descriptions-item label="工作地点">{{ currentJob.location }}</el-descriptions-item>
        <el-descriptions-item label="学历要求">{{ currentJob.education }}</el-descriptions-item>
        <el-descriptions-item label="经验要求">{{ currentJob.experience }}</el-descriptions-item>
        <el-descriptions-item label="职位描述" :span="2">{{ currentJob.description }}</el-descriptions-item>
        <el-descriptions-item label="任职要求" :span="2">{{ currentJob.requirement }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { getJobAdminList, getJobSubmit } from '@/api'

export default {
  name: 'JobAudit',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 职位列表
      jobList: [],
      // 查询参数
      queryParams: {
        currPage: 1,
        pageSize: 10,
        companyName: null,
        examineStatus: 1
      },
      // 对话框
      dialogVisible: false,
      // 当前查看的职位
      currentJob: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取职位列表
    getList() {
      this.loading = true
      getJobAdminList(this.queryParams).then(response => {
        this.jobList = response.data.list
        this.total = parseInt(response.data.total)
        this.loading = false
      })
    },
    // 查询按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置按钮操作
    resetQuery() {
      this.queryParams = {
        currPage: 1,
        pageSize: 10,
        jobName: null,
        companyName: null,
        examineStatus: 1
      }
      this.getList()
    },
    // 每页数量改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    // 查看职位详情
    handleView(row) {
      this.currentJob = row
      this.dialogVisible = true
    },
    // 审核操作
    handleAudit(row, status) {
      const statusText = status === 2 ? '通过' : '拒绝'
      this.$confirm(`确认要${statusText}该职位吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getJobSubmit({
          id: row.id,
          examineStatus: status
        }).then(() => {
          this.$message.success(`${statusText}成功`)
          this.getList()
        })
      }).catch(() => { })
    },
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        '1': 'warning',
        '2': 'success',
        '3': 'danger'
      }
      return statusMap[status]
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        '1': '待审核',
        '2': '已通过',
        '3': '已拒绝'
      }
      return statusMap[status]
    }
  }
}
</script>

<style scoped>
.job-audit-container {
  padding: 20px;
}

.filter-container {
  padding-bottom: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-descriptions) {
  margin: 20px 0;
}

:deep(.el-descriptions-item__label) {
  width: 120px;
  font-weight: bold;
}
</style>